<template>
  <div class="panel panel-green col-mx-12">
    <div class="panel-heading ">
      <i class="header-name"><strong id="this-node">{{node.toUpperCase()}}</strong> Detail information</i>
      <i class="panel-setting slow-query-info">
       	<i class="hidden" id="hidden-node">{{node}}</i>
      <a class="a-link" @click="showMethod"><i class=" fa fa-tasks"></i>Slow Query Logs</a>
      </i>
    </div>
    <div v-show="show" class="panel" id="slow-query" style="text-align:center;">
      <H3>Slow Query Logs</H3>
      <button del-type="current" class="btn btn-primary fa fa-trash" type="button"> Clear current logs</button>
      <button del-type="all" class="btn btn-primary fa fa-trash" type="button"> Clear all logs</button>
      <p></p>
      <textarea style="text-align:left;width:100%;" class="input-xlarge" id="show-query-log" rows="20">
      </textarea>
    </div>
    <!-- charts -->
    <div class="panel-body">
      <div class="row">
        <!-- Begin: To display backup info in one sub-panel for every db node   -->
        <div class="col-mx-4 col-md-6">
          <div class="panel panel-green">
            <i class="fa fa-bar-chart-o"></i> Database Connection
            <div class="panel-body">
              <div id="db-connections" class="panel-height"></div>
            </div>
          </div>
        </div>
        <div class="col-mx-4 col-md-6">
          <div class="panel panel-green">
            <i class="fa fa-bar-chart-o"></i> Database Connection List
            <div class="panel-body">
              <div class="panel-height" style="overflow-y: scroll;">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>SELECT INFO</th>
                      <th>COUNT</th>
                    </tr>
                  </thead>
                  <tbody id="db-select-list">
                    <tr v-for="($val, $idx) in selectList" :key="$idx">
                      <td>{{$idx + 1}}</td>
                      <td>{{$val.info}}</td>
                      <td>{{$val.count}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-mx-4 col-md-6">
          <div class="panel panel-yellow">
            <i class="fa fa-bar-chart-o"></i> InnoDB Disk IO (Read/Write)
            <div class="panel-body">
              <div id="innodb-disk-io" class="panel-height"></div>
            </div>
          </div>
        </div>
        <div class="col-mx-4 col-md-6">
          <div class="panel panel-green">
            <i class="fa fa-bar-chart-o"></i> InnoDB Buffer Pool
            <div class="panel-body">
              <div class="col-mx-5 col-md-5">
                <div class="panel panel-brown panel-body">
                  <div class="read-request">Read Req.: {{readRequestRate}} K pages/s</div>
                </div>
                <div class="panel panel-orange panel-body">
                  <div class="write-request">Write Req.: {{writeRequestRate}} pages/s</div>
                </div>
                <div class="panel panel-green panel-body">
                  <div class="disk-read">Disk Read: {{distReadRate}} #/s</div>
                </div>
              </div>
              <div class="col-mx-7 col-md-7">
                <div id="innodb-buffer-pool" class="panel-height"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-mx-4 col-md-6">
          <div class="panel panel-yellow">
            <i class="fa fa-bar-chart-o"></i> Network Status (Received/Send)
            <div class="panel-body">
              <div id="network-status" class="panel-height"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { init, loadDatas, } from './loadDbDetail'

export default {
  data() {
    return {
      show: false,
      node: '',
      selectList: [],
      readRequestRate: 0,
      writeRequestRate: 0,
      distReadRate: 0,
      drawInterval: null,
    }
  },

  mounted() {
    this.$store.commit('LOC_PAGE', this.$route.name)
    this.node = this.$route.query.node || ''
    init().then(() => {
      this.drawCharts()
    })
  },

  beforeRouteUpdate(to, from, next) {
    this.$nextTick(() => {
      clearTimeout(this.drawInterval)
      let {
        query,
      } = to
      this.node = query.node || ''
      init().then(() => {
        this.drawCharts()
        next()
      })
    })
  },

  methods: {
    showMethod() {
      this.show = !this.show
    },

    drawCharts() {
      if (this.$store.state.page != 'DbDetail')
        return false
      loadDatas({
        node: this.node
      }).then(result => {
        let {
          selectList,
        } = result
        this.selectList = selectList
        this.drawInterval = setTimeout(this.drawCharts, this.$store.state.interval)
      })
    },
  },

}

</script>
<style>


</style>
